<template>
  <div id="app">
    <div id="testChart" ref="testChart"></div>
  </div>
</template>

<script>
export default {
  name: "EmpBasic",
  data() {
    return {}
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      let echarts = require('echarts')
      let testChart = echarts.init(this.$refs.testChart);

      testChart.setOption({
        tooltip: {//弹窗
        },
        legend: {
          show: false,
        },
        series: [{//图片配置
          type: 'graph', //关系图
          layout: 'force', //图的布局，类型为力导图，'circular' 采用环形布局，见示例 Les Miserables
          legendHoverLink: true,//是否启用图例 hover(悬停) 时的联动高亮。
          hoverAnimation: true,//是否开启鼠标悬停节点的显示动画
          coordinateSystem: null,//坐标系可选
          xAxisIndex: 0, //x轴坐标 有多种坐标系轴坐标选项
          yAxisIndex: 0, //y轴坐标
          force: {
            repulsion: 450,//相距距离
            edgeLength: [150, 200],
            layoutAnimation: true
          },
          roam: true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          nodeScaleRatio: 0.6,//鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
          draggable: true,//节点是否可拖拽，只在使用力引导布局的时候有用。
          focusNodeAdjacency: true,//是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
          edgeSymbol: ['none', 'arrow'],//边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'arrow']
          symbolSize: 50,//图形大小
          edgeSymbolSize: 10,//边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
          itemStyle: {//===============图形样式，有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
            normal: { //默认样式
              label: {
                show: true
              },

            },
            emphasis: {//高亮状态

            }
          },
          lineStyle: { //==========关系边的公用线条样式。
            normal: {
              color: '#000000',
              width: '1',
              type: 'solid', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
              curveness: 0, //线条的曲线程度，从0到1
              opacity: 1
              // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
            },
            emphasis: {//高亮状态

            }
          },
          label: { //=============图形上的文本标签
            normal: {
              show: true,//是否显示标签。
              position: 'bottom',//标签的位置。['50%', '50%'] [x,y]   'inside'
              textStyle: { //标签的字体样式
                color: '#2D2F3B', //字体颜色
                fontStyle: 'normal',//文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
                fontWeight: 'bolder',//'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
                fontFamily: 'sans-serif', //文字的字体系列
                fontSize: 12, //字体大小
              }
            },
            emphasis: {//高亮状态

            }
          },
          edgeLabel: {//==============线条的边缘标签
            normal: {
              show: false
            },
            emphasis: {//高亮状态

            }
          },
          //别名为nodes   name:影响图形标签显示,value:影响选中后值得显示,category:所在类目的index,symbol:类目节点标记图形,symbolSize:10图形大小
          //label:标签样式。
          //数据
          data: [
            {
              "id": 0,
              "name": "f0120",
              "symbol": "diamond",
              "symbolSize": 50
            }, {
              "id": 1,
              "name": "私有云研发测试环境",
              "symbol": "diamond",
              "symbolSize": 40,
              "type": "cluster"
            }, {
              "id": 2,
              "name": "存储01",
              "symbol": "diamond",
              "symbolSize": 40,
              "type": "host"
            }, {
              "id": 3,
              "name": "存储02",
              "symbol": "diamond",
              "symbolSize": 40,
              "type": "host"
            }, {
              "id": 4,
              "name": "存储03",
              "symbol": "diamond",
              "symbolSize": 40,
              "type": "host"
            }, {
              "id": 5,
              "name": "计算01",
              "symbol": "diamond",
              "symbolSize": 40,
              "type": "host"
            }],
          links: [
            {"source": 0, "target": 1},
            {"source": 0, "target": 2},
            {"source": 0, "target": 3},
            {"source": 0, "target": 4},
            {"source": 0, "target": 5},
          ],//edges是其别名代表节点间的关系数据。
          categories: []
        }]
      });
      this.$echartsResize(testChart)

      testChart.on('click', function (params) {
        alert("点击了：" + params.data.name)
      })

    }
  }
};
</script>

<style scoped>
#testChart {
  width: 100%;
  height: 600px;
}
</style>